<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog
        class="ba-operate-dialog"
        :fullscreen = "true"
        :close-on-click-modal="false"
        :model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
        @close="baTable.toggleForm"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">

            <div

                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
                :style="config.layout.shrink ? '':'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
            >
                <el-form
                    style="height: 86vh;"
                    v-if="!baTable.form.loading"
                    ref="formRef"
                    @submit.prevent=""
                    @keyup.enter="baTable.onSubmit(formRef)"
                    :model="baTable.form.items"
                    :label-position="config.layout.shrink ? 'top' : 'right'"
                    :label-width="baTable.form.labelWidth + 'px'"
                    :rules="rules"
                >
                    <el-alert type="info" show-icon v-if="baTable.form.items!.old_status == 2" >
                    <h3>商品待审核！！！</h3>
                    </el-alert>
                    <el-alert style="margin-top: 5px" type="info" show-icon v-if="baTable.form.items!.old_check_explain" >
                    <p>审核说明：{{baTable.form.items!.old_check_explain}}</p>
                    </el-alert>
                    <el-tabs v-model="baTable.form.activeName" class="demo-tabs">
                        <el-tab-pane label="基础信息" name="goods_info">
                            <!-- 商家选择字段已移除 -->
                            <FormItem :label="t('goods.goodsclass_id')" type="remoteSelect" v-model="baTable.form.items!.goodsclass_id" prop="goodsclass_id" :input-attr="{ pk: 'xxz_goodsclass.id', field: 'name', 'remote-url': '/admin/Goodsclass/index' }" :placeholder="t('Please select field', { field: t('goods.goodsclass_id') })" />
                            <FormItem :label="t('goods.name')" type="string" v-model="baTable.form.items!.name" prop="name" :placeholder="t('Please input field', { field: t('goods.name') })" />
                            <!--                    <FormItem :label="t('goods.delivery_type')" type="checkbox" v-model="baTable.form.items!.delivery_type" prop="delivery_type" :data="{ content: { '1': t('goods.delivery_type 1'), '2': t('goods.delivery_type 2') } }" :placeholder="t('Please select field', { field: t('goods.delivery_type') })" />-->
                            <FormItem :label="t('goods.image')" type="image" v-model="baTable.form.items!.image" prop="image" />
                            <FormItem :label="t('goods.images')" type="images" v-model="baTable.form.items!.images" prop="images" />
                            <FormItem :label="t('goods.video')" type="file" v-model="baTable.form.items!.video" prop="video" />
                            <FormItem :label="t('goods.is_sku')" type="radio" v-model="baTable.form.items!.is_sku" prop="is_sku" :data="{ content: { '0': t('goods.is_sku 0'), '1': t('goods.is_sku 1') } }" :placeholder="t('Please select field', { field: t('goods.is_sku') })" />
                            <FormItem :label="t('goods.is_pos')" type="radio" v-model="baTable.form.items!.is_pos" prop="is_pos" :data="{ content: { '0': t('goods.is_pos 0'), '1': t('goods.is_pos 1') } }" :placeholder="t('Please select field', { field: t('goods.is_pos') })" />
<!--                            <FormItem :label="t('goods.original_price')" v-if="baTable.form.items!.is_sku == 0" type="number" prop="original_price" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.original_price" :placeholder="t('Please input field', { field: t('goods.original_price') })" />-->
                            <FormItem :label="t('goods.price')" v-if="baTable.form.items!.is_sku == 0" type="number" prop="price" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.price" :placeholder="t('Please input field', { field: t('goods.price') })" />
<!--                            <FormItem :label="t('goods.cost_price')" v-if="baTable.form.items!.is_sku == 0" type="number" prop="cost_price" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.cost_price" :placeholder="t('Please input field', { field: t('goods.cost_price') })" />-->
                            <FormItem :label="t('goods.stock')"  v-if="baTable.form.items!.is_sku == 0"  type="number" prop="stock" :input-attr="{ step: 1 ,min:0}" v-model.number="baTable.form.items!.stock" :placeholder="t('Please input field', { field: t('goods.stock') })" />
                            <!--                    <FormItem :label="t('goods.vip_than')" type="number" prop="vip_than" :input-attr="{ step: 1,min:0 }" v-model.number="baTable.form.items!.vip_than" :placeholder="t('Please input field', { field: t('goods.vip_than') })" />-->

<!--                            <FormItem :label="t('goods.free_shipping')" type="radio" v-model="baTable.form.items!.free_shipping" prop="free_shipping" :data="{ content: { '0': t('goods.free_shipping 0'), '1': t('goods.free_shipping 1') } }" />-->

                            <FormItem :label="t('goods.direct_bonus')" type="number" prop="direct_bonus" :input-attr="{ step: 0.01, min: 0 }" v-model.number="baTable.form.items!.direct_bonus" :placeholder="t('Please input field', { field: t('goods.direct_bonus') })" />
                            <FormItem :label="t('goods.see_order_bonus')" type="number" prop="see_order_bonus" :input-attr="{ step: 0.01, min: 0 }" v-model.number="baTable.form.items!.see_order_bonus" :placeholder="t('Please input field', { field: t('goods.see_order_bonus') })" />
                            <FormItem :label="t('goods.level_bonus')" type="number" prop="level_bonus" :input-attr="{ step: 0.01, min: 0 }" v-model.number="baTable.form.items!.level_bonus" :placeholder="t('Please input field', { field: t('goods.level_bonus') })" />
                            <FormItem :label="t('goods.postage')" type="number" prop="postage" :input-attr="{ step: 0.01, min: 0 }" v-model.number="baTable.form.items!.postage" :placeholder="t('Please input field', { field: t('goods.postage') })" />

                        </el-tab-pane>
                        <el-tab-pane label="商品介绍" name="goods_content">
                            <FormItem :label="t('goods.introduce')" type="editor" v-model="baTable.form.items!.introduce" prop="introduce" @keyup.enter.stop="" @keyup.ctrl.enter="baTable.onSubmit(formRef)" :placeholder="t('Please input field', { field: t('goods.introduce') })" />
                        </el-tab-pane>
                        <el-tab-pane label="平台配置" name="goods_than" v-if="useAdminInfo().admin_type == 1">
                            <FormItem :label="t('goods.reccategory_id')" type="remoteSelect" v-model="baTable.form.items!.reccategory_id" prop="reccategory_id" :input-attr="{ pk: 'xxz_reccategory.id', field: 'name', 'remote-url': '/admin/Reccategory/index' }" :placeholder="t('Please select field', { field: t('goods.reccategory_id') })" />
                            <!-- <FormItem :label="t('goods.coin_num')"  type="number" prop="coin_num" :input-attr="{ step: 1,min:0  }" v-model.number="baTable.form.items!.coin_num" :placeholder="t('Please input field', { field: t('goods.coin_num') })" /> -->
                            <!-- <FormItem :label="t('goods.back_buy_money')"  type="number" prop="back_buy_money" :input-attr="{ step: 1,min:0  }" v-model.number="baTable.form.items!.back_buy_money" :placeholder="t('Please input field', { field: t('goods.back_buy_money') })" /> -->
                            <!-- <FormItem :label="t('goods.directly_return_money')"  type="number" prop="directly_return_money" :input-attr="{ step: 1,min:0  }" v-model.number="baTable.form.items!.directly_return_money" :placeholder="t('Please input field', { field: t('goods.directly_return_money') })" /> -->



<!--                            <FormItem :label="t('goods.add_limit_num')"  type="number" prop="add_limit_num" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.add_limit_num" :placeholder="t('Please input field', { field: t('goods.add_limit_num') })" />-->
                            <!-- <FormItem :label="t('goods.commission_than')"  type="number" prop="commission_than" :input-attr="{ step: 1,max:100,min:0 }" v-model.number="baTable.form.items!.commission_than" :placeholder="t('Please input field', { field: t('goods.commission_than') })" /> -->
                            <!-- <FormItem :label="t('goods.push_than')"  type="number" prop="push_than" :input-attr="{ step: 1,max:100,min:0  }" v-model.number="baTable.form.items!.push_than" :placeholder="t('Please input field', { field: t('goods.push_than') })" /> -->
                            <!-- <FormItem :label="t('goods.shop_push_than')"  type="number" prop="shop_push_than" :input-attr="{ step: 1 ,max:100,min:0 }" v-model.number="baTable.form.items!.shop_push_than" :placeholder="t('Please input field', { field: t('goods.shop_push_than') })" /> -->
                            <!-- <FormItem :label="t('goods.back_than')"  type="number" prop="back_than" :input-attr="{ step: 1 ,max:100,min:0 }" v-model.number="baTable.form.items!.back_than" :placeholder="t('Please input field', { field: t('goods.back_than') })" /> -->
                            <!-- <FormItem :label="t('goods.coin_than')"  type="number" prop="coin_than" :input-attr="{ step: 1 ,max:100,min:0 }" v-model.number="baTable.form.items!.coin_than" :placeholder="t('Please input field', { field: t('goods.coin_than') })" /> -->
                            <!-- <FormItem :label="t('goods.shareholder_than')"  type="number" prop="shareholder_than" :input-attr="{ step: 1 ,max:100,min:0 }" v-model.number="baTable.form.items!.shareholder_than" :placeholder="t('Please input field', { field: t('goods.shareholder_than') })" /> -->
                            <!-- <FormItem :label="t('goods.ten_than')"  type="number" prop="ten_than" :input-attr="{ step: 1 ,max:100,min:0 }" v-model.number="baTable.form.items!.ten_than" :placeholder="t('Please input field', { field: t('goods.ten_than') })" /> -->
                            <!-- <FormItem :label="t('goods.hundred_than')"  type="number" prop="hundred_than" :input-attr="{ step: 1 ,max:100,min:0 }" v-model.number="baTable.form.items!.hundred_than" :placeholder="t('Please input field', { field: t('goods.hundred_than') })" /> -->
<!--                            <FormItem :label="t('goods.shop_indirect_than')"  type="number" prop="shop_indirect_than" :input-attr="{ step: 1,max:100,min:0  }" v-model.number="baTable.form.items!.shop_indirect_than" :placeholder="t('Please input field', { field: t('goods.shop_indirect_than') })" />-->

                            <FormItem :label="t('goods.is_limit')"  type="switch" prop="is_limit"  v-model.number="baTable.form.items!.is_limit"  />

                            <FormItem :label="t('goods.limit_num')" v-if="baTable.form.items!.is_limit == 1"  type="number" prop="limit_num" :input-attr="{ step: 1,min:1  }" v-model.number="baTable.form.items!.limit_num" :placeholder="t('Please input field', { field: t('goods.limit_num') })" />

                            <el-row v-if="baTable.form.items!.is_limit == 1">
                                <el-col :span="7">

                                    <FormItem label="邀请"  type="number" prop="invite_num" :input-attr="{ step: 1 }" :min="1"  v-model.number="baTable.form.items!.invite_num" :placeholder="t('Please input field', { field: t('goods.invite_num') })" />

                                </el-col>
                                <el-col :span="12">

                                    &nbsp;&nbsp;人，获得&nbsp;&nbsp;<el-input-number v-model="baTable.form.items!.add_limit_num" :min="0"  />&nbsp;&nbsp;限购次数

                                </el-col>
                            </el-row>
                            <FormItem :label="t('goods.base_sales')" type="number" prop="base_sales" :input-attr="{ step: 1,min:0 }" v-model.number="baTable.form.items!.base_sales" :placeholder="t('Please input field', { field: t('goods.base_sales') })" />
                            <FormItem :label="t('goods.status')" v-if="baTable.form.items!.old_status != 2" type="radio" v-model="baTable.form.items!.status" prop="status" :data="{ content: { '0': t('goods.status 0'), '1': t('goods.status 1'),  } }" />
                            <FormItem :label="t('goods.weigh')" type="number" prop="weigh" :input-attr="{ step: 1 }" v-model.number="baTable.form.items!.weigh" :placeholder="t('Please input field', { field: t('goods.weigh') })" />
                        </el-tab-pane>

                        <el-tab-pane label="商品审核" name="goods_check" v-if="useAdminInfo().admin_type == 1 && baTable.form.items!.old_status == 2">
                            <FormItem :label="t('goods.status')" type="radio" v-model="baTable.form.items!.status" prop="status" :data="{ content: { '1': t('通过并上架'), '0': t('通过并下架'),'3': t('审核未通过') } }" />
                            <FormItem  :label="t('goods.check_explain')" type="textarea" v-model="baTable.form.items!.check_explain" :input-attr="{ rows: 3 }" />
                        </el-tab-pane>
                    </el-tabs>

                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm()">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { inject, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import { buildValidatorData } from '/@/utils/validate'
import {useAdminInfo} from "/@/stores/adminInfo";

const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    // shop_id 验证规则已移除
    goodsclass_id: [buildValidatorData({ name: 'required', title: t('goods.goodsclass_id') })],
    name: [buildValidatorData({ name: 'required', title: t('goods.name') })],
    delivery_type: [buildValidatorData({ name: 'required', title: t('goods.delivery_type') })],
    image: [buildValidatorData({ name: 'required', title: t('goods.image') })],
    images: [buildValidatorData({ name: 'required', title: t('goods.images') })],
    is_sku: [buildValidatorData({ name: 'required', title: t('goods.is_sku') })],
    is_pos: [buildValidatorData({ name: 'required', title: t('goods.is_pos') })],
    vip_than: [buildValidatorData({ name: 'required', title: t('goods.vip_than') })],
    price: [buildValidatorData({ name: 'required', title: t('goods.price') })],
    cost_price: [buildValidatorData({ name: 'required', title: t('goods.cost_price') })],
    original_price: [buildValidatorData({ name: 'required', title: t('goods.original_price') })],
    free_shipping: [buildValidatorData({ name: 'required', title: t('goods.free_shipping') })],
    // base_sales: [
    //     buildValidatorData({ name: 'number', title: t('goods.base_sales') }),
    //     buildValidatorData({ name: 'required', title: t('goods.base_sales') })
    // ],
    stock: [
        buildValidatorData({ name: 'required', title: t('goods.stock') }),
        buildValidatorData({ name: 'number', title: t('goods.stock') })
    ],
    sales: [buildValidatorData({ name: 'number', title: t('goods.sales') })],
    direct_bonus: [buildValidatorData({ name: 'number', title: t('goods.direct_bonus') })],
    see_order_bonus: [buildValidatorData({ name: 'number', title: t('goods.see_order_bonus') })],
    level_bonus: [buildValidatorData({ name: 'number', title: t('goods.level_bonus') })],
    postage: [buildValidatorData({ name: 'number', title: t('goods.postage') })],
    introduce: [buildValidatorData({ name: 'editorRequired', title: t('goods.introduce') })],
    create_time: [buildValidatorData({ name: 'date', title: t('goods.create_time') })],
    update_time: [buildValidatorData({ name: 'date', title: t('goods.update_time') })],
})


</script>

<style scoped lang="scss">

</style>
